<template>
	<div ref="mEchartsRef" :style="{height:height, width:width}"></div>
</template>

<script lang="ts" setup>
import {ref, nextTick, watch, onMounted, onBeforeUnmount, shallowRef} from 'vue'
import * as echarts from 'echarts'
import { EChartsOption } from 'echarts';
import T from './echarts-theme-T'
echarts.registerTheme('T', T)

const props = defineProps({
	height: { type: String, default: "100%" },
	width: { type: String, default: "100%" },
	nodata: {type: Boolean, default: false },
	option: { type: Object, default: () => {} }
})

const isActivat = ref(false)
const mEchartsRef = ref()
let instance = shallowRef();

watch(() => props.option, (v: EChartsOption) => {
	instance.value.setOption(v)
}, {deep:true})

onMounted(() => {
	isActivat.value = true
	nextTick(() => {
		draw()
	})
})

onBeforeUnmount(() =>{
	isActivat.value = false;
})

const draw = () => {
	//参考：https://blog.csdn.net/Ljwen_/article/details/129262389
	instance.value = echarts.init(mEchartsRef.value, 'T');
	instance.value.setOption(props.option)
}

</script>
